<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button{
            width: 80px;
            height: 30px;
            border: 1px solid #000;
            border-radius: 5px;
        }
        button.active{
            background-color: orangered;
            border: 1px solid orangered;
            border-radius: 5px;
        }
        div{
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 5px;
            display: none;
        }
    </style>
    
	</head>
	<body>
		
		<button class="active">按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<div style="display: block">111111</div>
		<div>222222</div>
		<div>333333</div>

	</body>
	<script>
        window.onload = function () {
            var t1 = new Tab()
            t1.init()
        }
        function Tab() {
            this.aBtn = document.querySelectorAll("button")
            this.aDiv = document.querySelectorAll("div")
        }
        Tab.prototype.init = function () {
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].index = i;
                var This = this;
                this.aBtn[i].onclick = function () {
                    This.func(this)
                };
            }
        }
        Tab.prototype.func = function(me){
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].className = "";
                this.aDiv[i].style.display = "none"
            }
            me.className = "active";
            this.aDiv[me.index].style.display = "block"
        }
    </script>
</html>